<template>
  <div class="poptip-page">
    <div class="nofirm">
      <b-poptip trigger="hover">
        <b-button>dark hover</b-button>
        <div slot="title">这是默认title</div>
        <div slot="content">这是默认内容——嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎</div>
      </b-poptip>
      <b-poptip theme="light" trigger="hover">
        <b-button>light hover</b-button>
        <div slot="title">这是默认title</div>
        <div slot="content">这是默认内容——嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎</div>
      </b-poptip>

      <b-poptip>
        <b-button>dark click</b-button>
        <div slot="title">这是默认title</div>
        <div slot="content">这是默认内容——嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎</div>
      </b-poptip>
      <b-poptip theme="light" ref="poptip">
        <b-button>light click</b-button>
        <div slot="title">这是默认title</div>
        <div slot="content">
          这是默认内容——嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎
          <b-button type="warning" @click="handleClose">关闭</b-button>
        </div>
      </b-poptip>

      <b-poptip trigger="focus">
        <b-button>dark focus</b-button>
        <b-input></b-input>
        <div slot="title">这是默认title</div>
        <div slot="content">这是默认内容——嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎</div>
      </b-poptip>
      <b-poptip theme="light" trigger="focus">
        <b-button>light focus</b-button>
        <b-input></b-input>
        <div slot="title">这是默认title</div>
        <div slot="content">这是默认内容——嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎</div>
      </b-poptip>
    </div>

    <div class="confirm">
      <b-poptip
        theme="light"
        confirm
        placement="top"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <b-button>light click confirm</b-button>
        <div slot="content">您确定要删除这条内容吗？</div>
      </b-poptip>

      <b-poptip confirm trigger="focus">
        <b-input placeholder="聚焦开启对话"></b-input>
        <div slot="content">您确定要删除这条内容吗？</div>
      </b-poptip>

      <b-poptip confirm trigger="hover">
        <b-button>hover confirm</b-button>
        <div slot="content">您确定要删除这条内容吗？</div>
      </b-poptip>
    </div>
  </div>
</template>
<script>
export default {
  name: "PoptipPage",
  methods: {
    handleOk() {
      console.log("ok");
      this.$Toast.info("点击了确定");
    },
    handleCancel() {
      console.log("cancel");
      this.$Toast.info("点击了取消");
    },
    handleClose() {
      this.$refs.poptip.hidden();
    },
  },
};
</script>
<style scoped>
.confirm {
  margin-top: 200px;
}
</style>